@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox">
		<div class="ibox-title">
			<h5>设计团队</h5>
		</div>
		<div class="ibox-content">
			<div class="row m-b">
				<div class="col-lg-8">
					<a href="{{url('admin/team/designer-add')}}" class="btn btn-w-m btn-warning m-r-xs"><i class="fa fa-plus"></i> 添加设计师</a>
				</div>
				<div class="col-lg-4">
					<form id="searchForm">
						<div class="input-group">
							<input type="text" name="kw" placeholder="请输入姓名" class="form-control">
							<span class="input-group-btn">
								<button type="submit" class="btn btn-primary">搜索</button>
							</span>
						</div>
					</form>
				</div>
			</div>
			<div class="table-responsive">
				<table id="tblDataList" class="table table-striped table-hover">
					<thead>
						<tr>
							<th width="50">#</th>
							<th>姓名</th>
							<th>职位</th>
							<th>经验</th>
							<th>费用</th>
							<th>擅长</th>
							<th><a data-toggle="tooltip" data-placement="top" title="头像">头像</a></th>
							<th><a data-toggle="tooltip" data-placement="top" title="审核">审核</a></th>
							<th></th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div id="pagination" class="text-center"></div>
			</div>
		</div>
	</div>
</div>

<script id="tplDataList" type="text/html">
	<%each rows as row i%>
	<tr data-id="<%row.id%>">
		<td><%i+1%></td>
		<td>
			<%row.realname%>
			<%if row.sex == '男'%>
			<i class="fa fa-mars text-success"></i>
			<%else%>
			<i class="fa fa-venus text-danger"></i>
			<%/if%>
		</td>
		<td><%row.post%></td>
		<td><%row.experience%></td>
		<td><%row.cost%></td>
		<td><%row.goodat%></td>
		<td>
			<a href="javascript:;" class="js-pic1" data-src="<%row.headimg%>">
				<%if row.headimg%>
				<i class="fa fa-file-image-o fa-lg"></i>
				<%else%>
				<i class="fa fa-cloud-upload fa-lg"></i>
				<%/if%>
			</a>
		</td>
		<td>
			<a href="javascript:;" class="js-status">
				<%if row.status%>
				<i class="fa fa-check text-navy"></i>
				<%else%>
				<i class="fa fa-ban text-danger"></i>
				<%/if%>
			</a>
		</td>
		<td>
			<a href="{{url('admin/team/designer-edit')}}?id=<%row.id%>" class="m-r-xs">
				<i class="fa fa-pencil-square fa-lg"></i>编辑
			</a>
			<a href="javascript:;" class="js-del">
				<i class="fa fa-times-circle fa-lg"></i>删除
			</a>
		</td>
	</tr>
	<%/each%>
</script>

<script id="tplUploadPic1" type="text/html">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal" type="button">&times;</button>
				<h4 class="modal-title" id="avatar-modal-label">图片上传</h4>
			</div>
			<div class="row modal-body">
				<form id="formUppic1" method="post" enctype="multipart/form-data" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">选择图片</label>
						<div class="col-sm-5">
							<input name="pic" type="file" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2">
							<input type="hidden" name="id"  value="<%id%>" />
							<button type="submit" class="btn btn-primary btn-w-m"><i class="fa fa-cloud-upload"></i> 上传图片</button>
							<button type="button" class="btn btn-danger m-l" onclick="deletePic1(<%id%>)"><i class="fa fa-trash"></i> 删除图片</button>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">预览</label>
						<div id="pictureViewer" class="col-sm-10">
							<%if src%>
							<img src="<%src%>" class="img-thumbnail" />
							<%else%>
							<img src="/assets/images/blank.gif" class="img-thumbnail" />
							<%/if%>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</script>
@endsection

@section('pagescript')
<script>
	$("#side-menu li[rel='team']").addClass("active")
	  .parents("ul").addClass("in").parents("li").addClass("active");

	var filter = {"kw":"","page":1,"limit":20};
	var RenderPageList = function(){
		$.get("{{url('admin/team/designer-page-rows')}}", filter, function(data){
			$("#tblDataList tbody").html(template("tplDataList", data));
			$("#pagination").html(page(data.page_count, data.total_rows, data.page));
		}).fail(failure);
	};

	$("#pagination").delegate("li a", "click", function(){
		filter.page = $(this).attr("rel");
		RenderPageList();
	});

	$("#searchForm").submit(function(){
		filter.kw = this.kw.value;
		filter.page = 1;
		RenderPageList();
		return false;
	});

	$("#tblDataList").delegate(".js-status", "click", function(){
		var obj = $(this).find('i'),
			id = $(this).parents('tr').eq(0).data('id'),
			status = obj.hasClass('fa-check') ? 0 : 1;
		obj.attr('class', 'fa fa-refresh animated rotateIn');
		$.post("{{url('admin/team/designer-update')}}", {'id':id,'status':status}, function(){
			if(status){
				obj.attr("class", 'fa fa-check text-navy');
			}else{
				obj.attr("class", 'fa fa-ban text-danger');
			}
		}).fail(failure);
	});

	$("#tblDataList").delegate('.js-pic1', 'click', function(){
		var data = {
			'id': $(this).parents('tr').eq(0).data("id"),
			'src': $(this).data("src")
		};
		$("#modalDialog").html(template("tplUploadPic1", data)).modal('show');
		return false;
	});

	$("#modalDialog").delegate("#formUppic1", 'submit', function(){
		var id = this.id.value,
				file = this.pic.value;
		if (file == ""){
			alert("请选择上传文件！");
			return false;
		}
		if (file.lastIndexOf(".") == -1){
			alert("文件类型不正确！");
			return false;
		}
		var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
		if (ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'png'){
			alert('图片必须是 JPG、JPEG、GIF 或者 PNG 格式！');
			return false;
		}
		var data = new FormData();
		data.append('id', id);
		data.append('pic', this.pic.files[0]);
		uploadPic1(data, function(result){
			$("#pictureViewer img").eq(0).attr("src", result);
    	var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
    			ta = tr.find(".js-pic1").eq(0);
    	ta.data("src", result);
    	ta.find("i").removeClass("fa-cloud-upload").addClass("fa-file-image-o");
		}, failure);
		return false;
	});

	var uploadPic1 = function(data, result, fail){
    $.ajax("{{url('admin/team/upload-headimg')}}", {
      type: "post",
      data: data,
      dataType: 'json',
      processData: false,
      contentType: false,
      beforeSend: function () {
        $("#loadingMask").fadeIn();
      },
      complete: function () {
        $("#loadingMask").fadeOut();
      },
      success: result,
      error: fail
    });
  };

  var deletePic1 = function(id){
		if(confirm("确定要删除此图片吗？")){
    	$.post("{{url('admin/team/remove-headimg')}}", {"id":id}, function(){
				$("#pictureViewer img").eq(0).attr("src", "/assets/images/blank.gif");
      	var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
      			ta = tr.find(".js-pic1").eq(0);
      	ta.data("src", "");
      	ta.find("i").removeClass("fa-file-image-o").addClass("fa-cloud-upload");
			}).fail(failure);
		}
	};

	$("#tblDataList").delegate(".js-del", "click", function(e){
  	var id = $(this).parents('tr').eq(0).data("id");
  	dialog({
			content: '<i class="fa fa-info-circle"></i> 确定要删除此记录吗？',
			ok: function(){
		  	$.post("{{url('admin/team/designer-delete')}}", {"id":id}, function(){
		  		$(e.target).parents("tr").eq(0).remove();
		  	}).fail(failure);
		  },
			cancel: true
		}).showModal();
	});

	$(function(){
		$('[data-toggle="tooltip"]').tooltip();
		RenderPageList();
	});
</script>
@endsection